<template>
	<view class="record flex--col">
		<RecordMark>
			<text>{{curSpotName}}</text>
		</RecordMark>
		<RecordList :curSpot="curSpot"
					:spots="travelingRoute.attractionsList"
					@recordSpot="handleRecordSpot"></RecordList>
		<RecordFunction :partnerInfo="partnerInfo" @stopTravel="$emit('stopTravel')"></RecordFunction>
	</view>
</template>

<script>
	import RecordList from "./RecordList.vue"
	import RecordMark from "./RecordMark.vue"
	import RecordFunction from "./RecordFunction.vue"
	import * as TravelingApi from "@/api/traveling/traveling.js"
	const number2text = ['前往第一站','第一站','第二站','第三站','第四站','第五站','第六站']
	export default {
		emits:['recordSpot'],
		props:['travelingRoute','partnerInfo','curSpot'],
		components:{
			RecordList,
			RecordMark,	
			RecordFunction
		},
		computed:{
			curSpotName(){
				return number2text[this.curSpot+1]
			}
		},
		methods:{
			async handleRecordSpot(index){
				this.$emit('recordSpot',index)
			},
		},
		
	}
</script>

<style lang="scss" scoped>
	.record{
		@include border-four-roundings;
		padding:12px 20px;
		overflow: hidden;
		gap:32px;
	}
	
</style>